import variables from '@/styles/variables.scss'

function getThemeStyle(style) {
  const _themeStyle = {}
  // eslint-disable-next-line prefer-const
  for (let key in variables) {
    if (key.indexOf(style) !== -1) {
      _themeStyle[key.split('-')[1]] = variables[key]
    }
  }
  return _themeStyle
}

function getDefaultState() {
  return {
    theme: 'default',
    themeStyle: getThemeStyle('default')
  }
}

const state = getDefaultState()

const mutations = {
  SET_THEMESTYLE(state, theme) {
    state.themeStyle = getThemeStyle(theme)
  },
  SET_THEME(state, theme) {
    state.theme = theme
  }
}

const actions = {
  setThemeStyle({ commit }, theme) {
    commit('SET_THEME', theme)
    commit('SET_THEMESTYLE', theme)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
